<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>Canvas</title>
		<script type="text/javascript" src="../build/dist.js"></script>
		<!--[if IE]><script src="../excanvas/excanvas.js"></script><![endif]-->
	</head>
	<body>
		<canvas id="c" width="300" height="150"></canvas>
		<img id="img" src="beach.jpg" alt="" onload="f();" />
		<script type="text/javascript">//<![CDATA[
var canvas, canvas2, ctx;
function smiley(canvas, dontClear) {
	if(!dontClear) {
		canvas.clear();
	}
	canvas.draw(new Curly.Smiley());
}
function f() {
	var el=document.getElementById('c');
	canvas=new Curly.Canvas(el);
	el.style.border='1px solid #AAA';
	el.style.position='absolute';
	el.style.left='50%';
	el.style.marginLeft=-(canvas.getWidth()>>1)+'px';
	el.style.marginTop=canvas.getHeight()+'px';
	
	smiley(canvas);
	canvas.overwriteState({fillStyle: Curly.Transparent});
	canvas.draw(new Curly.Rectangle(200, 10, 30, 30));
	
	canvas.pushDefaultState().applyState();
	
	ctx=canvas.getCtx();
	
	var el2=document.createElement('canvas');
	el2.width=100;
	document.body.appendChild(el2);
	canvas2=new Curly.Canvas(el2);
	el2.style.border='1px solid #AAA';
	el2.style.position='absolute';
	el2.style.left='50%';
	el2.style.top='0';
	el2.style.marginLeft=-(canvas2.getWidth()>>1)+'px';
	
	canvas2.copy(canvas, -100);
	canvas2.copyResized(canvas, 0, 0, 100, 25, 30, 30, 101, 101);
	
	var img=document.getElementById('img');
	ctx.setTransform.apply(ctx, Curly.Canvas.State.IDENTITY_MATRIX);
	
	canvas.clip(new Curly.Rectangle(20, 20, 40, 40));
	canvas.copy(img, 0, 0, 200, 50);
	
	canvas.clip(new Curly.Rectangle(100, 20, 30, 30));
	canvas.draw(new Curly.Rectangle(0, 0, 300, 150));
	
	canvas.clip(
		canvas.
			path(20, 70).
			lineTo(80, 80).
			lineTo(20, 100)
	);
	canvas.draw(new Curly.Rectangle(0, 0, 300, 150));
	
	canvas.unclip();
	for(var i=0; i<10; i++) {
		canvas.draw(new Curly.Pixel(30, 120+i*2));
	}
	
	smiley(canvas, true);
}
//		]]></script>
	</body>
</html>